﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>展示主题</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/icon.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</head>
<body>
<!--head-->
<div class="header" style="background-image: url(images/headbg.jpg)">
  <div class="logoimg">
    <a href="#" title=""><img src="images/bglogo.png" alt="" width="78"></a>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
      <div class="logotxt"><h1><a href="#">翻滚的画笔</a></h1></div> 
	  <h2 class="site-name text-center"><span>www.com</span></h2>
    </div>
  </div>
</div>
</div>
<!--container-->
<div class="container-fluid">
	<div class="row">
		<!--left-->
		<div class="col-md-3 left-box">
			<div class="row">
				<div class="li-box">
					<div class="input-group">
					  <input type="text" class="form-control" placeholder="输入关键字">
					  <span class="input-group-btn">
						<button class="btn btn-default" type="button">搜索</button>
					  </span>
					</div><!-- /input-group -->
				 </div>
				<div class="li-box count-box">
					<h3><span>网站统计</span></h3>
					<ul>				
						<li>文章：<strong>156</strong></li>
						<li>评论：<strong>273</strong></li>
						<li>图片：<strong>326</strong></li>
						<li>会员：<strong>289</strong></li>
						<li>在线：<strong>75</strong></li>
						<li>游客：<strong>136</strong></li>									
					</ul>
				</div>
				<div class="li-box use-box">
					<h3><span>活跃用户</span></h3>
					<ul>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img class="avatar"  src="images/gravatar.png" style="display: inline;"></a></li>
					</ul>					
				</div>
				<script type="text/javascript">
					$(document).ready(function()
					{
						$('.use-box li').hover(function()
						 {  
							$(this).find("li img").css("background","");
							$(this).find('img').animate({width:45, height:45,marginTop:-5, marginLeft:-2}, 500);
						 }, function()
						 {
							$(this).find("li img").css("background","");
							$(this).find('img').animate({width:45,height:45, marginTop:0, marginLeft:0},300);
						 });
					});
					</script>
				<div class="li-box topic-box">
					<h3><span>热门话题</span></h3>
					<ul>				
						<li><a href="#">Messenger是非常酷的弹框</a><span>2016.03.12</span></li>
						<li><a href="#">能够非常好的与Bootstrap融合</a><span>2016.03.12</span></li>
						<li><a href="#">单独使用效果也是</a><span>2016.03.12</span></li>
						<li><a href="#">Bootstrap日期时间选择器</a><span>2016.03.12</span></li>
						<li><a href="#">能够非常好的与</a><span>2016.03.12</span></li>
						<li><a href="#">自带4套皮肤</a><span>2016.03.12</span></li>						
					</ul>
				</div>
				<div class="li-box file-box">
					<h3><span>文章归档</span></h3>
					<ul>				
						<li><a href="#">2016年03月<span>&nbsp;(12)</span></a></li>
						<li><a href="#">2016年02月<span>&nbsp;(32)</span></a></li>
						<li><a href="#">2016年01月<span>&nbsp;(27)</span></a></li>
						<li><a href="#">2015年12月<span>&nbsp;(18)</span></a></li>							
					</ul>
				</div>				
				<div class="li-box tags-box">
					<h3><span>热门标签</span></h3>
					<ul>				
						<li><a href="#">前端技巧 </a></li>
						<li><a href="#">CSS</a></li>
						<li><a href="#">选择器</a></li>
						<li><a href="#">用户体验</a></li>
						<li><a href="#">设计思路</a></li>
						<li><a href="#">HTML5</a></li>
						<li><a href="#">SEO</a></li>
						<li><a href="#">网页设计</a></li>
						<li><a href="#">CSS3</a></li>
						<li><a href="#">SEO</a></li>
						<li><a href="#">网页设计</a></li>
						<li><a href="#">CSS3</a></li>						
					</ul>
				</div>
				<div class="li-box link-box">
					<h3><span>友情链接</span></h3>
					<ul>				
						<li><a href="#" title="#" target="_blank"><img src="img/google.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img src="img/baidu.png" style="display: inline;"></a></li>
						<li><a href="#" title="#" target="_blank"><img src="img/360.png" style="display: inline;"></a></li>								
					</ul>
				</div>
				<footer class="footer">					
					<p>© 2016 <span>www.com</span> 版权所有 </p>
					<p>粤ICP备000000000号</p> 	
				</footer>
			</div>
		</div>
		<!--right-->
		<div class="col-md-9">
			<div class="row">
				<nav class="navbar navbar-default page-title">
				  <div class="container-fluid">
					<div class="navbar-header">
					  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					  </button>
					</div>
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					  <ul class="nav navbar-nav">
						<li class="active"><a href="">文章</a></li>
						<li><a href="">网页模板</a></li>
						<li><a href="">UI设计</a></li>
						<li><a href="">个性修图</a></li>
						<li><a href="">留言</a></li>        
						</ul>
						<div class="navbar-right aw-user-nav">
				<!-- 登陆&注册栏 -->	
					<a class="btn-primary btnst" href="#">现在注册</a>
					<span class="or">or</span>
					<a class="btn-success btnst" href="#">立即登录</a>
					<!--<p><a href="#" class="btn btn-qq"><i class="icon icon-qq"></i> QQ 登录</a><p>-->
				</div>		
					</div>
				  </div>
				</nav>			
			</div>		
			<div class="row">
				<!--正文-->
				<div class="s-text">					
					<h3>Messenger是一个非常酷的弹框(Alert)</h3>
					<div class="text-list">
						<span>By (admin)</span>
						<span>发布(2016.02.15)</span>
						<span>阅读<span>(32)</span></span>
					</div>
					<p>Messenger是一个非常酷的弹框(Alert)组件，能够非常好的与Bootstrap融合，当然，单独使用效果也是非常棒。</p>
					<p>Messenger自带4套皮肤。Bootstrap日期时间选择器我见过最普遍的作品集，也是最普遍的让我看了一眼就会选择不要这个candidate的作品集，通常有一个固定的格式：上来就说“我的流程”。</p>
					<p><img src="img/img001.jpg"></p>
					<p>UX是一门科学，请问你除了做用户研究做线框图做原型做测试做迭代，还能给我玩出什么花样来？我不需要你把这些赘述一遍，我真正想看到的是，你如何用你的设计解决了一个具体的问题UX是一门科学，请问你除了做用户研究做线框图做原型做测试做迭代，还能给我玩出什么花样来？我不需要你把这些赘述一遍，我真正想看到的是，你如何用你的设计解决了一个具体的问题UX是一门科学，请问你除了做用户研究做线框图做原型做测试做迭代，还能给我玩出什么花样来？我不需要你把这些赘述一遍，我真正想看到的是，你如何用你的设计解决了一个具体的问题</p>					
				</div>
				<!--评论列表-->
				<div class="li-reply">
					<h3>最新回复</h3>
					<ul>
						<li>
							<div class="col-md-1"><img class="avatar" src="images/gravatar.png"></div>
							<div class="col-md-9"><p>admin<span>30秒之前</span></p><p>测试回复</p></div>
						</li>
						<li>
							<div class="col-md-1"><img class="avatar" src="images/gravatar.png"></div>
							<div class="col-md-9"><p>管理员<span>30秒之前</span></p><p>多做一个测试回复</p></div>
						</li>
						<li>
							<div class="col-md-1"><img class="avatar" src="images/gravatar.png"></div>
							<div class="col-md-9"><p>admin<span>30秒之前</span></p><p>测试回复</p></div>
						</li>
					</ul>
				</div>
				<!--评论框-->
				<div class="s-reply">
					<textarea class="form-control" rows="3"></textarea>
					<input class="btn btn-default" type="submit" value="提交回复">
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>